
<style lang="scss" scoped>
#pay {
  height: auto;
  margin-top: 70px;
}
#release {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0px;
}

.pro-box {
  position: relative;
  height: 108px;
  width: 100%;
  padding: 12px;
  border-radius: 3px;
  background: #fff;
}

.pro-box > img {
  width: 84px;
  height: 84px;
  display: block;
  margin-right: 9px;
}

.pro-box > div {
  padding: 13px 0;
}

.pro-box > div > .tit {
  font-size: 16px;
  color: rgba(255, 137, 156, 1);
  margin-bottom: 5px;
}

.pro-box > div > .log {
  font-size: 12px;
  color: rgba(160, 154, 155, 1);
}

.lot {
  margin-top: 6px;
  font-size: 12px;
  display: block;
  color: rgba(160, 154, 155, 1);
}

.log-box {
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
}

.log-box__tit {
  width: 100%;
  height: 45px;
  background: #fff;
  line-height: 45px;
  font-size: 16px;
  padding-left: 12px;
  border-bottom: 1px solid #e5e5e5;
}

.log-box__info {
  padding: 10px;
  height: auto;
}

.log-box__info > li {
  position: relative;
  padding-left: 20px;
  padding-bottom: 10px;
}

.log-box__info > li::before {
  width: 10px;
  height: 10px;
  max-height: 10px;
  border-radius: 50%;
  content: "";
  display: inline-block;
  background: rgba(204, 204, 204, 1);
  margin-top: 2px;
  margin-right: 10px;
  position: absolute;
  left: 0px;
}

.log-box__info > li.active::before {
  background: rgba(255, 161, 176, 1);
  z-index: 100;
}

.log-box__info > li.active > p {
  color: #333;
}

.log-box__info > li::after {
  width: 1px;
  height: 100%;
  content: "";
  display: inline-block;
  background: rgba(204, 204, 204, 1);
  margin-top: 2px;
  margin-right: 10px;
  position: absolute;
  left: 4px;
  top: 0px;
}

.log-box__info > li > .text-wrap {
  font-size: 12px;
  line-height: 18px;
  color: rgba(160, 154, 155, 1);
}

.log-box__info > li > span {
  font-size: 10px;
  color: rgba(160, 154, 155, 1);
}
</style>

<template>
  <div class="withdrawal">
    <ComHeader title="查看物流" leftArrow="true" />
    <div id="pay">
      <div id="release" class="flex-num-one">
        <div class="pro-box flex-display flex-center-pack">
          <img :src="photo" id="proIcon" />
          <div class="flex-num-one flex-display flex-display-column">
            <span class="tit" id="sing">{{issign}}</span>
            <span class="log" id="name">{{expName}}</span>
            <span class="lot" id="phone">官方电话{{expPhone}}</span>
          </div>
        </div>
        <!--物流信息-->
        <div class="log-box">
          <div class="log-box__tit">物流跟踪</div>
          <ul class="log-box__info" id="teamList" v-if="list && list.length">
            <li v-for="(item, index) in list" :key="index" :class="{'active':!index}">
              <p class="text-wrap flex-num-one">{{item.status}}</p>
              <span>{{item.time}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, Indicator } from "mint-ui";
export default {
  data() {
    return {
      photo: this.$route.query.photo,
      list: [], // 物流数据
      expName: "",
      expPhone: "",
      issign: ""
    };
  },
  created() {
    this.getLogisticsData();
  },
  methods: {
    getLogisticsData() {
      let params = {
        type: this.$route.query.logistics_company_code,
        no: this.$route.query.number
      };
      let _url = "https://wuliu.market.alicloudapi.com/kdi";
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      api
        .getLogistics(params, _url)
        .then(res => {
          Indicator.close();
          console.log(res);
          if (res.status == 200 && res.data.status == 0) {
            this.expName = res.data.result.expName;
            this.expPhone = res.data.result.expPhone;
            this.list = res.data.result.list;
            this.issign = res.data.result.issign == "1" ? "已签收" : "未签收";
          }
          if (res.data.msg) {
            Toast(res.data.msg == "ok" ? "获取物流信息成功" : res.data.msg);
          }
        })
        .catch(err => {
          Indicator.close();
        });
    }
  },
  components: {
    Scroll,
    ComHeader,
    Loading,
    Toast,
    Indicator
  }
};
</script>
